<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
    <style>
        .fileupload{
            position: relative;
        }
        .fileupload [type="file"]{
            width: 82px;
            height: 34px;
            position: absolute;
            opacity: 0;
        }
    </style>
</head>
<body>
<!--侧边栏-->
<aside class="ad_aside">
    <!--商标-->
    <div class="brand"><a href="index.html">Mall</a></div>
    <!--用户-->
    <div class="user">
        <img src="images/default.png" alt=""/>
        <span>超级管理员</span>
    </div>
    <!--菜单-->
    <div class="menu">
        <ul>
            <li><a href="user.html"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
            <li class="now">
                <a href="javascript:;"><span class="glyphicon glyphicon-list"></span> 分类管理</a>
                <div class="child">
                    <a href="category.html">一级分类</a>
                    <a class="now" href="brand.html">二级分类</a>
                </div>
            </li>
            <li><a href="product.html"><span class="glyphicon glyphicon-tags"></span> 商品管理</a></li>
        </ul>
    </div>
</aside>
<!--内容-->
<section class="ad_section">
    <!--顶部导航-->
    <nav class="ad_nav">
        <a data-menu href="javascript:;"><span class="glyphicon glyphicon-align-justify"></span></a>
        <a data-logout href="javascript:;"><span class="glyphicon glyphicon-log-out"></span></a>
    </nav>
    <div class="container-fluid">
        <!--路径导航-->
        <ol class="breadcrumb">
            <li><a href="#">管理系统</a></li>
            <li class="active">分类管理</li>
            <li class="active">二级分类</li>
        </ol>
        <div id="app">
            <div class="ad_content">
                <button id="addBtn" class="btn btn-default mb_15">添加分类</button>
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th width="10%">序号</th>
                        <th width="30%">一级分类名称</th>
                        <th width="30%">二级分类名称</th>
                        <th width="30%">二级分类LOGO</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,i) in list">
                        <td>{{i+1}}</td>
                        <td>{{item.categoryName}}</td>
                        <td>{{item.brandName}}</td>
                        <td><img width="50" height="50" :src="item.imgName" alt=""></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal fade" id="addModal">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                            <h4 class="modal-title">添加分类</h4>
                        </div>
                        <div class="modal-body">
                            <form action="#" id="form">
                                <div class="form-group">
                                    <div class="dropdown">
                                        <span>一级分类：</span>
                                        <button class="btn btn-default" type="button" data-toggle="dropdown">
                                            <span class="dropdown-text" v-html="categoryName">请选择</span> <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li v-for="(item,i) in list2" :id="item.id" @click="click1(item.id,item.categoryName)">
                                                <a href="#" >{{item.categoryName}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <input type="hidden" v-model="categoryId">
                                </div>
                                <div class="form-group">
                                    <input v-model="brandName" type="text" class="form-control" placeholder="请输入二级分类名称">
                                </div>
                                <div class="form-group">
                                    <div class="fileupload">
                                        <input type="file" id="fileinput" class="btn btn-default">
                                        <a class="btn btn-default">上传图片</a>
                                    </div>
                                </div>
                                <div class="form-group"><img width="100" height="100" :src="imgBase64"></div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" @click="click2">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/vue-2.6.12.js"></script>
<script src="js/axios-0.21.0.js"></script>
<script src="js/qs-6.9.4.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            list:null,
            list2:null,
            categoryId:null,
            categoryName:'请选择',
            brandName:null,
            imgBase64:'images/none.png',
            imgName:null
        },
        mounted(){
            //函数中套函数,必有此劫...
            var self = this;

            window.onload = function () {
                var input = document.getElementById("fileinput");
                if (typeof (FileReader) === 'undefined') {
                    result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
                    input.setAttribute('disabled', 'disabled');
                } else {
                    input.addEventListener('change', readFile, false);
                }
            }
            function readFile() {
                var file = this.files[0];
                //判断是否是图片类型
                if (!/image\/\w+/.test(file.type)) {
                    alert("只能选择图片");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    self.imgBase64 = this.result;
                    self.imgName = file.name;
                }
            }
            axios.get('http://127.0.0.1:8000/api/brands')
                .then(resp => this.list = resp.data.brandlist)

            axios.get('http://127.0.0.1:8000/api/categorys')
                .then(resp => this.list2 = resp.data.categorylist)
        },
        methods:{
                click1:function (id,categoryName){
                    this.categoryId = id
                    this.categoryName = categoryName
                },
                click2:function (){
                    if(!this.imgName){
                        alert('你还没有选择图片!')
                        return false;
                    }
                    if(!this.brandName){
                        alert('你还没有填写分类名称!')
                        return false;
                    }
                    base64 = this.imgBase64
                    fetch('http://127.0.0.1:8000/api/addbrand', {
                        method: 'POST',
                        body: JSON.stringify({
                            imgData: base64.substring(base64.indexOf(',')+1),
                            imgName: this.imgName,
                            categoryId:this.categoryId,
                            brandName: this.brandName,
                        }),
                        headers: {
                            'content-type': 'application/json',
                        }
                    }).then(resp => resp.json()).then(json => {
                        if (json.code == 200) {
                            $('#addModal').modal('hide');
                            axios.get('http://127.0.0.1:8000/api/brands')
                                .then(resp => this.list = resp.data.brandlist)
                        } else {
                            alert(json.message)
                        }
                    })
                }
        }
    })

    $('#addBtn').on('click',function () {
        /*显示模态框*/
        $('#addModal').modal('show');
    });
</script>
</body>
</html>